<template>
  <el-card class="recent-orders">
    <div class="order-header">
      <span class="title">最近订单</span>
      <el-button type="primary" link>查看更多</el-button>
    </div>
    <el-table :data="orderData" style="width: 100%">
      <el-table-column prop="orderId" label="订单号" width="180" />
      <el-table-column prop="customer" label="客户" width="120" />
      <el-table-column prop="amount" label="金额" width="120" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" />
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const orderData = ref([
  {
    orderId: 'ORD2024001',
    customer: '张三',
    amount: '¥1,234',
    status: '已完成',
    date: '2024-01-15'
  },
  {
    orderId: 'ORD2024002',
    customer: '李四',
    amount: '¥2,345',
    status: '处理中',
    date: '2024-01-14'
  },
  {
    orderId: 'ORD2024003',
    customer: '王五',
    amount: '¥3,456',
    status: '已完成',
    date: '2024-01-13'
  },
  {
    orderId: 'ORD2024004',
    customer: '赵六',
    amount: '¥4,567',
    status: '处理中',
    date: '2024-01-12'
  }
])
</script>

<style scoped>
.recent-orders {
  margin-top: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.order-header .title {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-table .cell) {
  white-space: nowrap;
}
</style> 